<template>
  <f7-page
    :page-content="false"
    ptr
    @ptr:refresh="refresh"
    infinite
    :infinite-distance="50"
    :infinite-preloader="true"
    @infinite="infinite"
  >
    <f7-navbar :sliding="false">
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>自定义搜索</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <!-- <f7-user-navbar title="自定义搜索"></f7-user-navbar> -->

    <f7-toolbar tabbar bottom>
      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
      <f7-link tab-link="#tab-2">Tab 2</f7-link>
    </f7-toolbar>

    <f7-tabs animated>
      <f7-tab id="tab-1" class="page-content" tab-active data-type="list">
        <f7-custom-searchbar
          :delay="2000"
          search-container=".search-list"
          search-in=".item-text"
          @search="searchQuery"
          v-model="search.userName"
        ></f7-custom-searchbar>

        <f7-list media-list class="search-list">
          <f7-list-item
            v-for="item in query.data"
            :key="item.userId"
            :title="item.userName"
            :after="item.loginId"
            :text="'测试文本 '"
            link="/business/components/empty"
          ></f7-list-item>
        </f7-list>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content" data-type="list$2">
        <f7-custom-searchbar
          :delay="2000"
          search-container=".search-list"
          search-in=".item-text"
          @search="searchQuery"
          v-model="search.userName"
        ></f7-custom-searchbar>

        <f7-list media-list class="search-list">
          <f7-list-item
            v-for="item in query$1.data"
            :key="item.userId"
            :title="item.userName"
            :after="item.loginId"
            :text="'测试文本 '"
            link="/business/components/empty"
          ></f7-list-item>
        </f7-list>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  enableBackRequest() {
    return true;
  }

  onBeforeInit() {
    this.urls = {
      // 列表请求，对应后台的返回PagerInfo的query列表查询接口
      query: ["/api/app/appUser/query", "/api/app/appUser/query?for=1"],
      // 这个比较随意，如果返回实体信息，一般建议把实体放在ViewModel里，然后返回ViewModel
      model:
        "/api/base/AppUpdate/checkUpdate?appCode=com.championsoft.mobile&osName=Android",
    };
  }

  mixin() {
    return {
      data() {
        return {
          var1: "变量1",
          var2: "变量2",
        };
      },
      methods: {
        func1() {},
        func2() {},
        handleScroll(e) {},
      },
      computed: {},
      mounted() {},
    };
  }
}
</script>

<style scoped>
</style>